<template>
  <div class="Category">
    <div class="isLike">
      <h2>猜你喜欢</h2>
      <!-- <div>

        <img
          src="http://static.zongheng.com/upload/recommend/8c/99/8c9941d1fb6122d5e73fb992be850c87.jpeg"
          alt=""
        />
        <img
          src="http://static.zongheng.com/upload/recommend/c7/f0/c7f04c63698c14e4a0a340b340cac17e.jpeg"
          alt=""
        />
      </div> -->
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="red">
        <van-swipe-item>
          <router-link to="/searchResult/浑天记">
            <van-image
              width="100%"
              height="100%"
              src="http://static.zongheng.com/upload/recommend/8c/99/8c9941d1fb6122d5e73fb992be850c87.jpeg"
            />
          </router-link>
        </van-swipe-item>
        <van-swipe-item>
          <router-link to="/searchResult/百怪录">
            <van-image
              width="100%"
              height="100%"
              src="http://static.zongheng.com/upload/recommend/c7/f0/c7f04c63698c14e4a0a340b340cac17e.jpeg"
            />
          </router-link>
        </van-swipe-item>
        <van-swipe-item>
          <router-link to="/searchResult/御剑问仙">
            <van-image
              width="100%"
              height="100%"
              src="https://static.zongheng.com/upload/recommend/7e/9c/7e9c0e8c9d02867d1269f8c6b18d0fd1.jpeg"
            />
          </router-link>
        </van-swipe-item>
        <van-swipe-item>
          <router-link to="/searchResult/神国之上">
            <van-image
              width="100%"
              height="100%"
              src="https://static.zongheng.com/upload/recommend/ac/d6/acd63e40b795afdcb2d17b351feb7332.jpeg"
            />
          </router-link>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="sexType">
      <van-tabs>
        <van-tab title="男生">
          <div class="mask">
            <Loading v-show="!manTitles.length"></Loading>
          </div>
          <ul>
            <li v-for="(item, index) in manTitles" :key="index">
              <router-link
                :to="{
                  path: `/categoryDetails/${item.name}`,
                  query: {
                    sex: 'man',
                  },
                }"
              >
                <img :src="item.url" />
                <span>{{ item.name }}</span>
              </router-link>
            </li>
          </ul>
        </van-tab>
        <van-tab title="女生">
          <ul>
            <li v-for="(item, index) in girlTitles" :key="index">
              <router-link
                :to="{
                  path: `/categoryDetails/${item.name}`,
                  query: {
                    sex: 'girl',
                  },
                }"
              >
                <img :src="item.url" />
                <span>{{ item.name }}</span>
              </router-link>
            </li>
          </ul></van-tab
        >
      </van-tabs>
    </div>
  </div>
</template>
<script>
import Loading from "../../../../music/src/commonents/Loading.vue";

export default {
  components: {
    Loading,
  },
  data() {
    return {
      manTitles: [],
      girlTitles: [],
      imgList: [
        require("../assets/1.png"),
        require("../assets/2.png"),
        require("../assets/3.png"),
        require("../assets/4.png"),
        require("../assets/5.png"),
        require("../assets/6.png"),
        require("../assets/7.png"),
        require("../assets/8.png"),
        require("../assets/9.png"),
        require("../assets/10.png"),
        require("../assets/11.png"),
        require("../assets/12.png"),
        require("../assets/13.png"),
        require("../assets/14.png"),
      ],
      imgListTwo: [
        require("../assets/01.png"),
        require("../assets/02.png"),
        require("../assets/03.png"),
        require("../assets/04.png"),
        require("../assets/05.png"),
        require("../assets/06.png"),
        require("../assets/07.png"),
        require("../assets/08.png"),
        require("../assets/09.png"),
        require("../assets/010.png"),
        require("../assets/011.png"),
        require("../assets/012.png"),
      ],
    };
  },
  created() {
    // 主分类
    this.$axios.get("/categories").then((d) => {
      console.log(d);
      this.manTitles = d.data.male;
      for (let i = 0; i < this.manTitles.length; i++) {
        this.manTitles[i].url = this.imgList[i];
      }
      console.log(this.manTitles);
      this.girlTitles = d.data.female;
      for (let i = 0; i < this.girlTitles.length; i++) {
        this.girlTitles[i].url = this.imgListTwo[i];
      }
    });
    // 子分类
    this.$axios.get("/sub-categories").then((d) => {
      console.log(d);
    });
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.Category {
  background: rgb(246, 247, 249);
  padding-bottom: 16vw;
}
.isLike {
  padding: 4vw;
  h2 {
    color: black;
    font-size: 18px;
  }
  .my-swipe {
    width: 92vw;
  }
}
.sexType {
  .van-tabs {
    margin: 0vw 4vw;
    overflow: hidden;
    .mask {
      position: fixed;
      left: 50%;
      top: 47%;
      margin-left: -22px;
      margin-top: -22px;
    }
    ul {
      margin-top: 4vw;
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      li {
        margin-top: 4vw;
        width: 44vw;
        height: 10vw;
        background-color: #fff;
        line-height: 10vw;
        border-radius: 20px;

        &:nth-child(2n) {
          margin-left: 4vw;
        }
        a {
          display: flex;
          justify-content: space-between;
          align-items: center;
          img {
            width: 8vw;
            height: 8vw;
            margin-left: 3vw;
          }
          span {
            display: block;
            margin-right: 3vw;
            color: black;
          }
        }
      }
    }
  }
}
</style>
